<template>
    <div ref="containerRef">
        <slot></slot>
        <!-- 通过 Teleport 将菜单传送到 body 中  -->
        <Teleport to="body">
            <div class="context-menu">
                <div class="menu-list">
                    <div @click="handleClick(item)" class="menu-item" v-for="(item) in menu" :key="item.label">
                        {{ item.label }}
                    </div>
                </div>
            </div>
        </Teleport>
    </div>
</template>

<script>
export default {
    name: "contextMenu",
    props: {
        menu: {
            type: Array,
            default: () => [],
        },
    },
    methods: {
        handleClick(item) {
            console.log(item.label)
        }
    }
}
</script>
